<html>
<head>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script type="text/javascript">
        var lat=50.0
        var lon=10.0
        var zoom=11
        var map; 
        var marker;
        var popup;
        var lonLat;



        function init() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                            maxResolution: 156543.0399,
                numZoomLevels: 16,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );



            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
            map.addLayer(layerTilesAtHome);
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            map.addLayer(layerCycleMap);

            layerMarkers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(layerMarkers);
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            var newPx = map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.projection)));
            map.setCenter (lonLat, zoom);
            var size = new OpenLayers.Size(21,25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
            marker =new OpenLayers.Marker(lonLat,icon);
            popup = new OpenLayers.Popup("Test",
                                 new OpenLayers.LonLat(lon,lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
                                 new OpenLayers.Size(75,35),
                                 "<font size=-2>Lon: "+Math.round(lon * 10000) / 10000+"<br>Lat: "+Math.round(lat * 10000) / 10000);
                map.addPopup(popup);
            popup.hide();
            popup.opacity=0.5;
            marker.events.register('mouseover', marker, function (e) { popup.toggle();OpenLayers.Event.stop (evt); } );
            layerMarkers.addMarker(marker);
            window.setInterval("setMarker()", 3000);
        }

        function setMarker(){
                lon=lon+0.01;
        lat=lat+0.01;
        var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                var newPx = map.getPixelFromLonLat(lonLat);
            marker.moveTo(newPx);
        popup.moveTo(newPx);
        popup.setContentHTML("<font size=-2>Lon: "+Math.round(lon * 10000) / 10000+"<br>Lat: "+Math.round(lat * 10000) / 10000);
        }
    </script>
</head>
<body onload="init();">
    <div style="width:50%; height:70%" id="map"></div>
    
</body>
</html>
